<script setup lang="ts">
import Breadcrumb from "@/components/breadcrumb/Breadcrumb.vue"
import AutoForm from "@/components/auto-form/AutoForm.vue"
import {onMounted, ref} from "vue";
import {Page} from "@/interface/base.ts";
import {
  useCreateChargeApi,
  usePageChargeApi,
} from "@/services/api";
import {AutoFormItem} from "@/interface/auto-form.ts";
import type {CreateChargeReqVO, PageChargeReqVO, PageChargeRespVO} from "@/interface/charge.ts";

const dialogVisible = ref(false)
const title = ref("")
const model = ref<Record<string, AutoFormItem>>({
  amount: {
    key: "amount",
    name: "金额",
    value: "",
    itemType: "input-float",
    placeholder: "请输入金额",
    rules: {
      required: true,
      message: '请输入金额',
      trigger: 'blur'
    }
  }
})
const pageChargeReq = ref<PageChargeReqVO>({
  size: 10,
  current: 1
})
const chargeTableData = ref<Page<PageChargeRespVO>>({
  list: [],
  total: 0
})
const loadData = async () => {
  const {data: res} = await usePageChargeApi(pageChargeReq.value)
  chargeTableData.value = res
}
/**
 * 根据类型名称进行搜索
 */
const handleSearch = (): void => {
  loadData()
}
/**
 * 处理类型添加方法
 */
const handleAdd = (): void => {
  title.value = "新增"
  dialogVisible.value = true
}

const handleSizeChange = () => {
  pageChargeReq.value.current = 1
  loadData()
}
const handleCurrentChange = (val: number) => {
  pageChargeReq.value.current = val
  loadData()
}
const onSubmit = async (data: CreateChargeReqVO) => {
    await useCreateChargeApi(data)
    await loadData()
  dialogVisible.value = false
}
const onCancel = () => {
  dialogVisible.value = false
}
onMounted(() => {
  loadData()
})
</script>

<template>
  <div class="container">
    <div class="breadcrumb">
      <breadcrumb></breadcrumb>
    </div>
    <div class="search">
      <el-form :inline="true" :model="pageChargeReq" class="demo-form-inline">
        <el-form-item label="卡密">
          <el-input v-model="pageChargeReq.id" placeholder="请输入卡密" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table :data="chargeTableData.list" border style="width: 100%">
        <el-table-column prop="id" label="卡密" width="200"/>
        <el-table-column prop="amount" label="金额" width="90"/>
        <el-table-column prop="status" label="状态" width="90">
          <template #default="scope">
            <el-tag
                :type="scope.row.status == 0 ? 'success' : 'danger'"
            >
              {{scope.row.status == 0 ? "未充值" : "已充值"}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template #header>
            <el-button link type="primary" size="large" @click="handleAdd">
              新增
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
          v-model:current-page="pageChargeReq.current"
          v-model:page-size="pageChargeReq.size"
          :page-sizes="[10, 20, 30, 40]"
          :small="false"
          :disabled="false"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="chargeTableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <auto-form :title="title" :dialog-visible="dialogVisible" :model="model" @onSubmit="onSubmit"
               @onCancel="onCancel"></auto-form>
  </div>
</template>

<style scoped>
.container {
  flex: 1;
  background-color: #fdfdfd;
  padding: 20px;
}

.search {
  padding: 10px;
}

.pagination {
  padding: 20px;
}

</style>